<template>
  <section class="about-section">
    <div class="about-container">
      <div class="about-content">
        <h2 class="about-title">慧就业·大学生就业平台简介</h2>
        <div class="about-divider"></div>
        <p class="about-text">
          慧就业·大学生就业平台成立于2025年，致力于为大学生提供简历制作，题库练习，企业习题，Ai模拟面试等综合服务。
        </p>
        <p class="about-text">
          慧就业·大学生就业平台拥有获得国际奖项的制作人等专业人才，为大学生提供不凡的就业帮助服务。
        </p>
        <div class="address-info">
          <svg class="location-icon" viewBox="0 0 24 24" fill="none" stroke="#f39c12" stroke-width="2">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
          <span>天津市东丽区</span>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.about-section {
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.9) 0%, rgba(255, 245, 230, 0.9) 100%);
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none" stroke="%23f39c1233" stroke-width="0.5"><circle cx="50" cy="50" r="40"/></svg>');
  opacity: 0.3;
  z-index: -1;
}

.about-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.about-container::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(243, 156, 18, 0.05) 0%, transparent 70%);
  z-index: -1;
}

.about-content {
  position: relative;
  z-index: 2;
}

.about-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.about-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: #f39c12;
}

.about-divider {
  width: 100px;
  height: 2px;
  background: #f39c12;
  margin: 20px auto 30px;
  opacity: 0.7;
}

.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
  text-align: justify;
  text-justify: inter-word;
}

.address-info {
  display: flex;
  align-items: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed rgba(243, 156, 18, 0.3);
  color: #555;
  font-size: 1.1rem;
}

.location-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .about-section {
    padding: 50px 15px;
  }
  
  .about-container {
    padding: 30px;
  }
  
  .about-title {
    font-size: 2rem;
  }
  
  .about-text {
    font-size: 1rem;
  }
  
  .address-info {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .about-container {
    padding: 20px 15px;
  }
  
  .about-title {
    font-size: 1.8rem;
  }
  
  .about-divider {
    margin: 15px auto 20px;
  }
  
  .address-info {
    font-size: 0.9rem;
    margin-top: 20px;
    padding-top: 15px;
  }
  
  .location-icon {
    width: 20px;
    height: 20px;
  }
}
</style>
